
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const BarComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(chartRef.current);

    // 指定图表的配置项和数据
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [115, 65, 145, 75, 65, 105, 125],
          type: 'bar'
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 返回一个清理函数，用于在组件卸载时销毁图表实例
    return () => {
      myChart.dispose();
    };
  }, []); // 确保 useEffect 只在组件挂载和卸载时运行

  return <div ref={chartRef} style={{ width: '600px', height: '400px' }}></div>;
}

export default BarComponent;